<template>
  <view class="hire_page">
    <view class=" _w-max _top _left _z-index-2 _pos-fixed _top _left"
      :style="{ 'background-color': 'rgba(255, 255, 255,' + srollOpacity + ')' }">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18"
        :style="{ color: 'rgb(' + srollColor + ','  + srollColor + ',' + srollColor +')'}">新租售</view>
    </view>
    <image style="width: 100%;" :src="imgs.BANNER" mode="" />
    <view class="container">
      <image class="new_mode" :src="imgs.NEWMOD" mode="" />
      <image class="blu_mode" :src="imgs.BLUVEH" mode="" />
      <view class="board">
        <view @click="toPublish">
          <image style="width: 100%;height: 120rpx;" :src="imgs.CONPAN" mode="widthFix" />
        </view>
        <view @click="toSublease">
          <image style="width: 100%;height: 120rpx;" :src="imgs.HIREOT" mode="widthFix" />
        </view>
      </view>
      <view class="nav">
        <scroll-view class="nav-scroll" scroll-x="true">
          <view v-for="(item, index) in navList" :key="index" class="nav-item"
            :class="{'nav-item-active': cate_id === item.id}" @click="switchTab(item.id)">
            {{ item.cate_name }}
          </view>
        </scroll-view>
      </view>
      <view class="_flex-row-bet _pad-bottom-10 _border-bottom">
      	<view class="_flex-row _flex-1">
      		<view class="_mar-right-24">
      			<view class="selection" @click="changeCity(1,'选择城市')">
      				{{area.city_name?area.city_name:'请选择城市'}}
      				<image class="selection_icon" src="https://taxi.raxan.xyz/wechat/static/images/icon-arrow-down.png" mode=""></image>
      			</view>
      		</view>
      		<view class="_flex-1">
      			<view class="selection" @click="changeArea(1,'选择门店')">
      			{{area.area_name? area.area_name : '请选择门店'}}
      				<image class="selection_icon" src="https://taxi.raxan.xyz/wechat/static/images/icon-point-block.png" mode=""></image>
      			</view>
      		</view>
      	</view>
      </view>
      <view class="car_list">
        <view class="empty" v-if="list.length === 0 && loading === false">
          <img class="empty_img" :src="imgs.EMPTY" alt="">
          <view style="color: #B9B9BD;">暂无数据</view>
        </view>
        <view class="car_list_item" v-for="item in list" :key="item.id" @click=toDetal(item.id)>
          <view class="tag" v-if="item.depreciation_rate">
            <image class="tag_bg" :src="imgs.RECTABGLE" mode="" />
            <view class="tag_label">{{ item.depreciation_rate }}</view>
          </view>
          <view class="car_list_item_top">
            <view class="info">
              <image class="thumb" :src="item.pic" mode="" />
              <view class="desc">
                <view class="name">{{ item.type_name }}</view>
                <view class="offical_price">指导价 {{ item.guide_money }}万元</view>
                <view class="price">
                  <view class="label">新车：</view>
                  <view>
                    {{item.price_month}}元/月
                    {{item.price}}元/天
                  </view>
                </view>
                <view class="price" style="margin-top: 10rpx;">
                  <view class="label" style="flex-shrink: 0;">{{item.city_name}}-</view>
                  <view class="label">
                   {{item.title}}
                  </view>
                </view>

              </view>
            </view>
            <view class="params">
              <view class="params_left">
                <view class="param_item">
                  <image class="logo" :src="imgs.PIC" mode="" />
                  车系图片
                </view>
                <view class="param_item">
                  <image class="logo" :src="imgs.TIMELINE" mode="" />
                  参数配置
                </view>
              </view>
              <view class="params_right">立即租车</view>
            </view>
          </view>
          <view class="car_list_item_btm">
            <view class="btm_left">
              <image class="logo" :src="imgs.BETTER_THAN" mode="" />
              <view class="text">{{item.advantages}}</view>
            </view>
            <image class="arrow_right" :src="imgs.ARROW_RIGHT" mode="" />
          </view>
        </view>

      </view>

    </view>

  </view>
</template>
<script>
  import {
    getCateList
  } from '@/api/store.js'
  import {
    getNewSales
  } from '@/api/hire.js'
  import {
    mapGetters
  } from 'vuex';
  import {
    getUserInfo
  } from '@/api/user.js';
  const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

  const IMAGES = {
    BANNER: concat('banner.png'),
    NEWMOD: concat('u_xzscx.png'),
    BLUVEH: concat('u_veh_right.png'),
    CONPAN: concat('u_publish_veh.png'),
    HIREOT: concat('u_hire_other.png'),
    PIC: concat('u_pic.png'),
    TIMELINE: concat('u_timeline.png'),
    BETTER_THAN: concat('u_better_than.png'),
    ARROW_RIGHT: concat('arrow_right.png'),
    RECTABGLE: concat('rectangle.png'),
    EMPTY: concat('empty.png')
  }
  export default {
    data() {
      return {
        recHeight: 0,
        imgs: IMAGES,
        srollOpacity: 0,
        srollColor: 255,
        navList: [],
        list: [],
        cate_id: '',
        total: 0,
        page: 1,
        loading: false,
        userInfo: {},
        area:{
        	area_id:0,
        	area_name:'',
        	city_id:0,
        	city_name:'',
        	latitude:0,
        	longitude:0,
        },
      }
    },
    onReachBottom() {
      this.getNewSales(true);
    },
    onPageScroll(e) {
      this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
      this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 &&
        e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
    },
    onLoad() {
      this.switchTab("")
       this.getPhoneInfo();
    },
    onShow() {
      if (!this.list.length) {
        this.getNewSales();
      }
     
      if (!this.navList.length) {
        this.getCateList();
      }

      if (this.isLogin&&!Object.keys(this.userInfo).length) {
        this.getUserInfo();
      }
    },
    computed: mapGetters(['isLogin']),
    methods: {
      getUserInfo() {

        getUserInfo().then((res) => {
          this.userInfo = res.data;

        }).catch((err) => {
          uni.showToast({
            title: '用户信息获取失败',
            icon: 'none'
          })
        })
      },
      toDetal(id) {
        uni.navigateTo({
          url: '/pages/hire_sub/detail/index?id=' + id
        })
      },
      switchTab(id) {
        this.cate_id = id
        this.total = 0;
        this.page = 1;
        this.getNewSales();
      },
      //选择城市
      changeCity(type,title){
      	let that = this;
      	let param = {};
      	param.title = title;
      	uni.navigateTo({
      		url:`/pages/car_sub/address_list/index?param=${JSON.stringify(param)}`,
      		events:{
      			getCity(option){
      			that.area.city_name = option.label;
      			that.area.city_id = option.value;
      			that.area.area_name = '';
      			that.area.area_id = 0;
      				// uni.setStorageSync('ADDRESS',that.area)
      			},
      		},
      	})
      },
      //选择地点
      changeArea(type,title){
      	let that = this;
      	let param = {};
      	param.title = title;
  
      	if(type == 1){
      		if(!that.area.city_id) return uni.showToast({title:'请选择城市',icon:"none"})
      		param.name = that.area.city_name;
      		param.id = that.area.city_id;
      	}
      	uni.navigateTo({
      		url:`/pages/car_sub/address_list/index?param=${JSON.stringify(param)}`,
      		events:{
      			getAddress(option){
             
      				that.area.area_name = option.title;
      				that.area.area_id = option.id;
      				that.area.latitude = option.latitude;
      				that.area.longitude = option.longitude;
              that.switchTab('')
      			},
      		},
      	})
      },
      getNewSales(isAdd) {
        this.checkLoading(
          () => getNewSales({
            cate_id: this.cate_id,
            page: this.page,
            place_id:this.area.area_id
          }).then(res => {
            const {
              data,
              current_page
            } = res.data || {};
            if (!data.length) return;
            this.list = isAdd ? ([...this.list, ...(data || [])]) : (data || []);
            this.page = current_page + 1;
            this.pageLoad = true;
          })
        )
      },
      getCateList() {
        this.checkLoading(
          () => getCateList().then(res => {
            this.navList = [{
                cate_name: '全部',
                id: ''
              },
              ...(res.data || [])
            ];
          })
        )
      },
      toPublish() {
        if (this.userInfo.is_new_sale) {
          uni.navigateTo({
            url: `/pages/hire_sub/publish/index`
          })
        } else {
          uni.showToast({
            title: "您当前不是新租售用户",
            icon: 'none'
          })
        }
      },
      toSublease() {
        uni.navigateTo({
          url: `/pages/hire_sub/sublease/index`
        })
      },
      checkLoading(fn) {
        this.loading = true;
        uni.showLoading({
          title: '加载中'
        })
        fn().finally(() => {
          this.loading = false;
          uni.hideLoading()
        })
      },
      // 获取顶部高度信息
      getPhoneInfo() {
        uni.getSystemInfo({
          success: (res) => {
            this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .h_96 {
    height: 96rpx;
  }

  .c_fff {
    color: #FFFFFF;
  }

  .f_s_18 {
    font-size: 36rpx;
  }

  .felx_c {
    display: flex;
    align-items: center;
    justify-content: center;
  }
	.selection {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 48rpx;
		font-size: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		justify-content: flex-start;
		color: rgba(0, 0, 0, 0.9);
		.selection_icon {
			flex: 0 0 32rpx;
			width: 32rpx;
			height: 32rpx;
			margin-left: 4rpx;
		}
	}
  .hire_page {
    box-sizing: border-box;
    position: relative;
    min-height: 101vh;
    background: #F8F9FC;
    color: rgba(0, 0, 0, 0.9);

    .container {
      position: relative;
      z-index: 1;
      margin-top: -216rpx;
      background: #F8F9FC;
      border-radius: 24rpx 24rpx 0 0;
      padding: 48rpx 32rpx;

      .blu_mode {
        position: absolute;
        width: 100vw;
        height: 160rpx;
        top: 0;
        left: 0;
        margin-top: -76rpx;
        margin-top: -118rpx;
      }

      .new_mode {
        position: absolute;
        left: 32px;
        top: 0;
        width: 262rpx;
        height: 92rpx;
        margin-top: -76rpx;
      }

      .board {
        font-size: 0px;
        columns: 2;
        column-gap: 18rpx;
      }

      .nav {
        padding: 32rpx 0;

        .nav-scroll {
          white-space: nowrap;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.9);
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;

          .nav-item {
            display: inline-block;
            line-height: 44rpx;
            margin-left: 8rpx;
            height: 52rpx;
            padding: 4rpx 20rpx;
            background-color: #FFFFFF;

            &:first-child {
              margin-left: 0;
            }

            &.nav-item-active {
              background-color: #E6F3FF;
              font-weight: 600;
            }
          }
        }
      }

      .car_list {
        .empty {
          margin-top: 50rpx;
          text-align: center;

          .empty_img {
            margin: auto;
            width: 360rpx;
            height: 360rpx;
          }
        }

        .car_list_item {
          position: relative;
          padding: 24rpx 32rpx;
          background-color: #FFFFFF;
          margin-bottom: 24rpx;
        }

        .tag {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          display: inline-block;
          padding: 0 8rpx;
          height: 34rpx;
          line-height: 34rpx;
          color: #111E36;
          font-size: 24rpx;

          .tag_bg {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
          }

          .tag_label {
            position: relative;
            z-index: 1;
          }
        }

        .car_list_item_top {
          padding-bottom: 28rpx;
          border-bottom: 1rpx solid #E7E7E7;

          .info {
            padding-bottom: 24rpx;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 24rpx;

            .thumb {
              flex: 0 0 230rpx;
              width: 0 0 230rpx;
              height: 120rpx;
            }

            .desc {
              flex: 1;
              max-width: 65%;

              .name {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 36rpx;
                color: rgba(0, 0, 0, 0.9);
                line-height: 52rpx;
                text-align: left;
                margin-bottom: 8rpx;
              }

              .offical_price {
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 28rpx;
                color: #008DFF;
                line-height: 44rpx;
                text-align: left;
                margin-bottom: 8rpx;
              }

              .price {
                font-family: DIN, DIN;
                font-weight: bold;
                font-size: 28rpx;
                color: #FF5700;
                line-height: 33rpx;
                text-align: left;
                display: flex;
                justify-content: flex-start;

                .label {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 26rpx;
                  color: rgba(0, 0, 0, 0.9);
                }
              }
            }
          }

          .params {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            .params_left {
              display: flex;
              align-items: flex-start;
              justify-content: flex-start;
              gap: 16rpx;

              .param_item {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 8rpx;
                color: #111E36;
                font-size: 24rpx;
                font-weight: 500;
                height: 52rpx;
                background: #F8F9FC;
                border-radius: 8rpx;
                padding: 0 24rpx;

                .logo {
                  flex: 0 0 32rpx;
                  width: 32rpx;
                  height: 32rpx;
                }
              }
            }

            .params_right {
              flex: 0 0 132rpx;
              width: 132rpx;
              line-height: 52rpx;
              background: #008DFF;
              border-radius: 4rpx 4rpx 4rpx 4rpx;
              color: #FFFFFF;
              font-weight: 500;
              font-size: 24rpx;
              text-align: center;
            }
          }
        }

        .car_list_item_btm {
          margin-top: 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .btm_left {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8rpx;

            .logo {
              flex: 0 0 104rpx;
              width: 104rpx;
              height: 32rpx;
            }

            .text {
              width: 400rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #464E64;
              line-height: 40rpx;
            }
          }

          .arrow_right {
            flex: 0 0 32rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
</style>